<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    #i1 ~ #i3 { color: red }
</style>
<div id="sandbox">
    <div id="i1"></div>
    <div id="i2"></div>
    <div></div>
    <div></div>
    <div id="i3">This text should not be red.</div>
</div>
<script>
    test(() => {
        assert_true(!!window.internals, "This test only works with internals exposed");
    }, "internals are exposed");

    test(() => {
        assert_equals(getComputedStyle(i3).color, "rgb(255, 0, 0)", "#i3 color should be red");
    }, "#i3 red before mutations");


    test(() => {
        sandbox.offsetTop; // Force clean style/layout.
        sandbox.removeChild(i1);
        sandbox.removeChild(i2);
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "#i3 should have had its style recalculated");
    }, "#i3 recalculated");

    test(() => {
        assert_equals(getComputedStyle(i3).color, "rgb(0, 0, 0)", "#i3 color should not be red");
    }, "#i3 not red after mutations");
</script>
